Skip to content

🐛 Fix glitchy kangaroo bounce animation on welcome screen #10035

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mrubens merged 1 commit into from
Jan 8, 2026
Merged

🐛 Fix glitchy kangaroo bounce animation on welcome screen #10035

mrubens merged 1 commit into from
Jan 8, 2026
+30 −2

Conversation

@objectiveSee
Copy link
Contributor

@objectiveSee objectiveSee commented Dec 11, 2025 •
edited by ellipsis-dev bot
Loading

Description

Fixes the visual glitch where the kangaroo logo on the welcome screen would instantly jump to the top position when hovering, instead of smoothly starting the bounce from its resting position.

Changes

  • Added custom keyframe animation in that explicitly starts from
  • Updated component to use hover state tracking with the new animation
  • Removed Tailwind's class which was causing the glitch

Testing

The kangaroo now smoothly bounces from the resting position without any jarring visual jumps when hovering over it on the welcome screen.

Screenshots/Videos

The animation now starts smoothly from the resting position instead of jumping to the top first.

Checklist

  • Code follows project style guidelines
  • Changes have been tested locally
  • Lint and type checks pass
  • Commit message follows emoji convention

Important

Fixes kangaroo bounce animation glitch on welcome screen by adding custom keyframe animation and hover state tracking in RooHero.tsx.

  • Behavior:
    • Fixes kangaroo bounce animation glitch on welcome screen by ensuring smooth transition from resting position.
    • Removes Tailwind's group-hover:animate-bounce class causing the glitch in RooHero.tsx.
  • Animation:
    • Adds smooth-bounce keyframe animation to index.css for smooth hover effect.
    • Applies smooth-bounce animation in RooHero.tsx based on hover state.
  • State Management:
    • Introduces isHovered state in RooHero.tsx to track hover status and trigger animation.

This description was created by Ellipsis for 7dc65d8. You can customize this summary. It will automatically update as commits are pushed.

@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. UI/UX UI/UX related or focused labels Dec 11, 2025
@roomote
Copy link
Contributor

roomote bot commented Dec 11, 2025 •
edited
Loading

Rooviewer Clock   See task on Roo Cloud

Review complete. No issues found.

The fix correctly addresses the animation glitch by using a custom keyframe animation that explicitly starts from translateY(0) and tracking hover state via React state instead of relying on Tailwind's group-hover:animate-bounce class.

Previous reviews

Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.

@cte cte requested a review from brunobergher December 11, 2025 21:22
@cte
Copy link
Collaborator

cte commented Dec 11, 2025

CC @brunobergher

@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Dec 11, 2025
@brunobergher
Copy link
Collaborator

brunobergher commented Dec 11, 2025

I love the dedication here. Thanks for doing what I was too lazy to do 🙏

@objectiveSee
Copy link
Contributor Author

objectiveSee commented Dec 12, 2025

Happy to tweak minor stuff. It was fun jumping into the code. 🦘🦘

@hannesrudolph hannesrudolph moved this from Triage to PR [Needs Review] in Roo Code Roadmap Jan 7, 2026
@hannesrudolph hannesrudolph added PR - Needs Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Jan 7, 2026
@RooCodeInc RooCodeInc deleted a comment from roomote bot Jan 7, 2026
@hannesrudolph
Copy link
Collaborator

hannesrudolph commented Jan 7, 2026

@roomote Please run PR Fixer mode on this PR.

@roomote
Copy link
Contributor

roomote bot commented Jan 7, 2026 •
edited
Loading

Fixaroo Clock   See task on Roo Cloud

Resolved merge conflicts by merging main and preserving the smooth-bounce animation fix. All local checks passed.

View commit | Revert commit

@hannesrudolph
Copy link
Collaborator

hannesrudolph commented Jan 7, 2026

@roomote force push to 7dc65d8

@roomote
Copy link
Contributor

roomote bot commented Jan 7, 2026 •
edited
Loading

Fixaroo Clock   See task on Roo Cloud

Resolved merge conflicts by rebasing onto main. All local checks passed.

View commit | Revert commit

@objectiveSee @hannesrudolph
🐛 Fix glitchy kangaroo bounce animation on welcome screen
dc9fbc3 
The kangaroo logo on the welcome screen had a visual glitch where it would instantly jump to the top position when hovering, instead of smoothly starting the bounce from its resting position.

Changes:
- Added custom smooth-bounce keyframe animation in index.css that explicitly starts from translateY(0)
- Updated RooHero component to use hover state tracking with the new animation
- Removed Tailwind's animate-bounce class which was causing the glitch

The animation now smoothly bounces from the resting position without any jarring visual jumps.
@hannesrudolph hannesrudolph force-pushed the fix/kangaroo-bounce-animation branch from 7dc65d8 to dc9fbc3 Compare January 8, 2026 00:12
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 8, 2026
@mrubens mrubens merged commit b2941d5 into RooCodeInc:main Jan 8, 2026
10 checks passed
@github-project-automation github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Jan 8, 2026
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Jan 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrubens mrubens mrubens approved these changes

@roomote roomote[bot] roomote[bot] approved these changes

@cte cte Awaiting requested review from cte cte is a code owner

@jr jr Awaiting requested review from jr jr is a code owner

@brunobergher brunobergher Awaiting requested review from brunobergher

Assignees

No one assigned

Labels

lgtm This PR has been approved by a maintainer PR - Needs Review size:M This PR changes 30-99 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

Roo Code Roadmap
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@objectiveSee @cte @brunobergher @hannesrudolph @mrubens